<template>子应用测试
  <micro-app
      name='appname-vite'
      url='http://localhost:4007/child/vite/'
      inline
      :data="microAppData"
      @created="handleCreate"
      @beforemount="handleBeforeMount"
      @mounted="handleMount"
      @unmount="handleUnmount"
      @error="handleError"
      @datachange="handleDataChange"
  ></micro-app>
</template>

<script lang="ts">
import {reactive, toRefs} from 'vue'

export default {
  name: "SubApp",
  setup() {
    const state = reactive({
      microAppData: {msg: "来自基座的新数据"}
    })
    const handleCreate = (): void => {
      console.log("child-vite 创建了");
    }

    const handleBeforeMount = (): void => {
      console.log("child-vite 即将被渲染");
    }

    const handleMount = (): void => {
      console.log("child-vite 已经渲染完成");
    }

    const handleUnmount = (): void => {
      console.log("child-vite 卸载了");
    }
    const handleError = (): void => {
      console.log("child-vite 加载出错了");
    }

    const handleDataChange = (e: CustomEvent): void => {
      console.log("来自子应用 child-vite 的数据:", e.detail.data);
    }
    return {
      ...toRefs(state),
      handleCreate,
      handleBeforeMount,
      handleMount,
      handleUnmount,
      handleError,
      handleDataChange
    }
  }
}
</script>

<style scoped lang="scss">

</style>
